<template>
  <el-container class="h-100 p-0">
    <el-main
      class="p-0"
      v-loading="loading"
      element-loading-text="地图加载中"
      element-loading-background="rgba(0, 0, 0, 0.1)"
      element-loading-spinner="el-icon-map-location"
    >
      <div
        style="text-align: center;border-radius: 5px;margin-right: 15px;width: 141px;color:#a1bacf; position: absolute;z-index: 10;margin-top: 10px;font-size: 14px;background-color:rgba(15,20,67,0.8)"
      >
        <el-row
          style="margin-bottom: 7px;margin-top:7px;"
          :gutter="40"
          v-for="item in themes"
          :key="item.color16"
        >
          <el-col :span="2">
            <div
              :style="{'background-color':item.color16,'width': '35px','height': '20px','margin-left':'5px','border-rudis':'5px','margin-right':'10px'}"
            ></div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple">{{item.text}}</div>
          </el-col>
        </el-row>
        <div
          v-show="isShow"
          @click="recoveryMap"
          style="font_weight:blod;letter-spacing:3px;padding:5px;background-color:white;color:black;cursor:pointer;"
        >返回省级</div>
      </div>
      <InitMap
        ref="map"
        height="100%"
        backgroundColor="white"
        @dbClick="gClick"
        @moveGraphics="movePointer"
      />
      <div class="areaInfoBox display-inline-block" :style="classObject">
        <div style="border-bottom:1px solid">{{currentArea.name}}</div>
        <div style="height:100%;margin-top:5px">
          <div>
            <div style="float:left;">
              <span>{{showAll}}</span>
              <span style="margin-left:5px;color:rgb(96, 216, 55);">{{currentArea.total}}</span>
            </div>
            <div style="float:left;width:100%;" v-show="currentArea.molecule">
              <span>{{showMol}}</span>
              <span style="margin-left:5px;color:rgb(96, 216, 55);">{{currentArea.molecule}}</span>
            </div>
            <div style="float:left;width:100%;" v-show="currentArea.prosesser">
              <span>{{prosesser}}</span>
              <span style="margin-left:5px;color:rgb(96, 216, 55);">{{currentArea.prosesser}}</span>
            </div>
            <div style="float:left;width:100%;" v-show="currentArea.processRate">
              <span>{{processRate}}</span>
              <span style="margin-left:5px;color:rgb(96, 216, 55);">{{currentArea.processRate}}</span>
            </div>
            <div style="float:left;width:100%;" v-show="currentArea.provinceRanking">
              <span>{{provinceRanking}}</span>
              <span style="margin-left:5px;color:rgb(96, 216, 55);">{{currentArea.provinceRanking}}</span>
            </div>
            <div style="float:left;width:100%;" v-show="currentArea.ranking">
              <span>{{ranking}}</span>
              <span style="margin-left:5px;color:rgb(96, 216, 55);">{{currentArea.ranking}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import InitMap from "../map/InitMap";
import axios from "axios";

const preCode = "61";
const defaultColor = "#10C4E5";
export default {
  name: "conutrystaticsmap",
  title: "地图显示",
  components: { InitMap },
  props: {
    provinceRanking: {
      type: String,
      default: ""
    },
    ranking: {
      type: String,
      default: "1"
    },
    urlType: {
      type: String,
      default: "1"
    },
    showAll: {
      type: String,
      default: ""
    },
    showMol: {
      type: String,
      default: ""
    },
    prosesser: {
      type: String,
      default: ""
    },
    processRate: {
      type: String,
      default: ""
    },
    themeMapData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      classObject: {
        display: "none"
      },
      cityName: "",
      loading: false,
      isCity: false,
      themes: [],
      currentArea: {
        molecule: 0,
        total: 0,
        name: "",
        prosesser: ""
      },
      currentGraphics: [],
      currentCenter: [],
      currentScal: 4000000,
      provinceId: "610000",
      isShow: true
    };
  },
  methods: {
    renderMap(data, colors, code) {
      colors.forEach(cc1 => {
        let cc = cc1.color;
        var r = parseInt(cc[0]);
        var g = parseInt(cc[1]);
        var b = parseInt(cc[2]);

        var hex =
          "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        cc1.color16 = hex;
      });
      this.themes = colors;
      let _this = this;
      let url = "";
      let scal = 6000000;
      if (this.$store.getters.userType == 3) {
        url =
          this.$api.getRegionByCode +
          "?code=" +
          this.$store.state.user.user.cityId;
        this.isCity = true;
        scal = 600000;
      } else {
        url = this.$api.getRegionByCode + "?code=" + code;
        if (code == this.provinceId) {
          this.isCity = false;
          scal = 6000000;
        } else {
          scal = 2000000;
          this.isCity = true;
        }
      }
      let lables = [];
      this.loading = true;
      axios.get(url).then(res => {
        if (res.data.code === "200") {
          // 一下加0.4，2.2为手动试验出来的，不准确可以自己调
          this.$refs.map.removeGraphics();
          let centerPoinit =
            this.isCity == false
              ? this.$commonUtils.provinceCenter
              : [res.data.data[0].lnt, res.data.data[0].lat];
          this.currentCenter = centerPoinit;
          let drawComplate = 0;
          res.data.data[0].child.forEach((element, i) => {
            let paths = [];
            // 因为咸阳市和西安市的市名在地图上会有些重叠，所以对她两的经纬度做一些单独的调整
            if (element.name === "西安市") {
              lables.push({
                point: [element.lnt + 0.05, element.lat - 0.2],
                name: element.name
              });
            } else if (element.name === "咸阳市") {
              lables.push({
                point: [element.lnt - 0.3, element.lat + 0.5],
                name: element.name
              });
            } else {
              lables.push({
                point: [element.lnt, element.lat],
                name: element.name
              });
            }
            element.points.forEach(el => {
              let lngLats = el.region.split(",");
              let crings = [];
              lngLats.forEach(ll => {
                let lngLat = ll.split(" ");
                crings.push([lngLat[0], lngLat[1]]);
              });
              paths.push(crings);
            });
            let cor = defaultColor;
            let eAttData = {};
            colors.forEach(cl => {
              let co = cl;
              data.forEach(d => {
                if (
                  d.value < co.max &&
                  d.value >= co.min &&
                  d.name == element.name
                ) {
                  cor = co.color;
                  eAttData = d;
                }
              });
            });
            let eAtt = {
              cityId: element.cityCode.substring(3, element.cityCode.length),
              cityName: element.name,
              total: eAttData.total,
              molecule: eAttData.molecule,
              prosesser: eAttData.prosesser,
              processRate: eAttData.processRate,
              ranking: eAttData.ranking,
              provinceRanking: eAttData.provinceRanking
            };
            this.$refs.map
              .addMultiplePolygon(paths, cor, "white", eAtt)
              .then(status2 => {
                if (status2) {
                  drawComplate++;
                  if (drawComplate == lables.length) {
                    this.$refs.map.mapCenterAt(centerPoinit, 8, scal);
                    this.loading = false;
                  }
                }
              });
          });
        }
      });
    },
    async initRenderMap() {
      return new Promise((resolve, reject) => {
        this.$refs.map.loadWebTileMap().then(status => {
          if (status) {
            this.$refs.map.creatGraphicsLayer().then(status1 => {
              this.$refs.map.hitTestGraphicEvent("double-click", "dbClick");
              this.$refs.map.hitTestGraphicEvent(
                "pointer-move",
                "moveGraphics"
              );
              return resolve(true);
            });
          }
        });
      });
    },
    gClick(e) {
      this.classObject = {
        display: "none"
      };
      if (e == undefined || e.selectGraphics == undefined) {
        return;
      }
      if (this.isCity) {
        return;
      }
      let _this = this;
      e.selectGraphics.forEach(item => {
        let attributes = item.graphic.attributes;
        if (
          attributes != undefined &&
          attributes.cityId != undefined &&
          attributes.cityId != ""
        ) {
          let cityId = attributes.cityId;
          let cityName = attributes.cityName;
          /*if (_this.urlType == "1") {
           // _this.getLandTypeData(cityId);
          } else if (_this.urlType == "2") {
            //_this.getProofFirstData(cityId);
          } else if (_this.urlType == "3") {
            //_this.getOuterData(cityId);
          }*/
          _this.$emit("selctedCityId", cityId, cityName);
          _this.isCity = true;
        }
      });
    },
    movePointer(e) {
      this.classObject = {
        display: "none"
      };
      if (this.currentGraphics.length > 0) {
        this.currentGraphics.forEach(gg => {
          gg.symbol = this.$refs.map.changePolygonGrapicSymbol(gg, 0.7);
        });
      }
      if (e == undefined || e.selectGraphics == undefined) {
        return;
      }
      e.selectGraphics.forEach(item => {
        let attributes = item.graphic.attributes;
        if (
          attributes != undefined &&
          attributes.cityId != undefined &&
          attributes.cityId != ""
        ) {
          let cityId = attributes.cityId;
          let total = attributes.total;
          let molecule = attributes.molecule;
          let _this = this;

          _this.currentArea.name = attributes.cityName;
          _this.currentArea.total = attributes.total;
          _this.currentArea.molecule = attributes.molecule;
          _this.currentArea.prosesser = attributes.prosesser;
          _this.currentArea.processRate = attributes.processRate;
          _this.currentArea.provinceRanking = attributes.provinceRanking;
          _this.currentArea.ranking = attributes.ranking;
          if (_this.isCity || _this.$store.getters.userType == 3) {
            _this.currentArea.ranking = attributes.provinceRanking;
            _this.currentArea.provinceRanking = undefined;
          }
          if (_this.urlType == "4") {
            _this.currentArea.ranking = attributes.ranking;
            _this.currentArea.provinceRanking = attributes.provinceRanking;
          }
          _this.classObject = {
            display: "inline",
            top: e.y + 100 + "px",
            left: e.x + document.body.clientWidth / 10 + "px"
          };
          _this.currentGraphics = [];
          item.graphic.symbol = _this.$refs.map.changePolygonGrapicSymbol(
            item.graphic,
            1
          );
          _this.currentGraphics.push(item.graphic);
        }
      });
    },
    getLandTypeData(cityId) {
      let surl = this.$api.getSampleProgressStatistical;
      let code = "";
      let _this = this;
      this.$get(surl, {
        provinceId: _this.provinceId,
        cityId: cityId
      })
        .then(res => {
          if (res.data.code === "200") {
            var tData = [];
            let _this = this;
            this.$emit("getMapData", res.data.data);
            res.data.data.forEach((element, i) => {
              let ii = {
                name: element.name,
                value: (element.areaYjz || 0) / (element.total || 1),
                total: element.total + "个",
                molecule: element.areaYjz + "个",
                prosesser:
                  parseInt(
                    ((element.areaYjz || 0) / (element.total || 1)) * 100
                  ) + "%",
                provinceRanking: i
              };
              tData.push(ii);
            });
            _this.renderMap(tData, _this.themeMapData, cityId);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getProofFirstData(cityId) {
      let surl = this.$api.getSpotProgressStatistical;
      let code = "";
      let _this = this;
      this.$get(surl, {
        provinceId: _this.provinceId,
        cityId: cityId
      })
        .then(res => {
          if (res.data.code === "200") {
            var tData = [];
            let _this = this;
            this.$emit("getMapData", res.data.data);
            res.data.data.forEach((element, i) => {
              let ii = {
                name: element.name,
                value: (element.areaYjz || 0) / (element.total || 1),
                total: element.total + "个",
                molecule: element.areaYjz + "个",
                prosesser:
                  parseInt(
                    ((element.areaYjz || 0) / (element.total || 1)) * 100
                  ) + "%",
                ranking: i
              };
              tData.push(ii);
            });
            _this.renderMap(tData, _this.themeMapData, cityId);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getOuterData(cityId) {
      let surl = this.$api.getWyhcProgressStatistical;
      let code = "";
      let _this = this;
      this.$get(surl, {
        provinceId: _this.provinceId,
        cityId: cityId
      })
        .then(res => {
          if (res.data.code === "200") {
            var tData = [];
            let _this = this;
            this.$emit("getMapData", res.data.data);
            res.data.data.forEach((element, i) => {
              let ii = {
                name: element.name,
                value: (element.areaYjz || 0) / (element.total || 1),
                total: element.total + "个",
                molecule: element.areaYjz + "个",
                prosesser:
                  parseInt(
                    ((element.areaYjz || 0) / (element.total || 1)) * 100
                  ) + "%",
                ranking: i
              };
              tData.push(ii);
            });
            _this.renderMap(tData, _this.themeMapData, cityId);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    recoveryMap() {
      if (this.isCity) {
        this.$emit("selctedProcinceId");
      }
    }
  },
  mounted() {
    if (this.$store.getters.userType == 3) {
      this.isShow = false;
    }
  }
};
</script>
<style lang='scss'>
#user-container {
  > div {
    width: 100%;
  }
}
.areaInfoBox {
  position: absolute;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 5px;
  height: auto;
  max-width: 200px;
}
</style>